<!--
	作者：2575202388@qq.com
	时间：2018-10-14
	描述：默认分页组件
-->
<template>
	<div>
		<Page @on-change="Change" @on-page-size-change="changesize" :current="current" :total="total" :show-elevator="showelevator" :page-size="pagesize" :show-sizer="showsizer" :placement="placement" :transfer="transfer" :page-size-opts="pagesizeopts">

		</Page>
		<Exportexcel ref="excel" :selectData="selectData" :defaultheader="tempdefaultheader" :paramiters="paramiters" :total="total" :serverUrl="serverUrl" :pagesize="pagesize" :headerlist="tempheaderlist" />
	</div>
</template>

<script>
	export default {
		name: "Defaultpage",
		props: {
			serverUrl: {
				type: String,
				default: ""
			},
			columns: {
				type: Array,
				default: function() {
					return [];
				}
			},
			headerlist: {
				type: Array,
				default: function() {
					return [];
				}
			},
			defaultheader: {
				type: Array,
				default: function() {
					return [];
				}
			},
			paramiters: {
				type: Object,
				default: function() {
					return {};
				}
			},
			type: {
				type: String,
				default: function() {
					return "post";
				}
			}
		},
		data() {
			return {
				tempdefaultheader: [],
				tempheaderlist: [],
				selectData: [],
				current: 1,
				total: 0,
				pagesizeopts: [5, 10, 20, 50, 100],
				size: "default",
				showelevator: true,
				showsizer: true,
				placement: "top",
				transfer: true,
				pagesize: 10
			}
		},
		created() {
			var tempdata = [];
			var list = [];
			if(this.columns) {
				this.columns.forEach(value => {
					var key = value.key;
					var label = value.title;
					if(key && label && key != "function") {
						tempdata.push({
							key: key,
							label: label
						});
						list.push(key);
					}
				})
			}

			if(this.headerlist.length > 0) {
				this.tempheaderlist = this.headerlist;
			} else {
				this.tempheaderlist = tempdata;
			}

			if(this.defaultheader.length > 0) {
				this.tempdefaultheader = this.defaultheader;
			} else {
				this.tempdefaultheader = list;
			}
		},
		methods: {
			exportExcel(datas) {
				if(datas) {
					this.selectData = datas;
				}
				this.$refs.excel.open();
			},
			Change(currentPage) {
				this.current = currentPage;
				this.getdatas();
			},
			changesize(pagesize) {
				this.pagesize = pagesize;
				this.getdatas();
			},
			getdatas() {
				this.$emit("loading", true);
				this.gethttp().then(result => {
						const datas = result.data;
						this.total = datas.page.totalItems;
						this.$emit("loading", false);
						this.$emit('pagechange', datas.data);
					})
					.catch(() => {
						this.$emit("loading", false);
						this.$emit('pagechange', []);
					})
			},
			getparamites() {
				return {
					_PAGE_NO_: this.current,
					_PAGE_SIZE_: this.pagesize,
					...this.paramiters
				};
			},
			gethttp() {
				if(this.type == "post") {
					return this.$http.post(this.serverUrl, this.getparamites());
				} else if(this.type == "get") {
					return this.$http.get(this.serverUrl);
				}
			}
		},
		watch: {
			serverUrl: {
				handler: function() {
					this.current=1;
					this.getdatas();
				},
				deep: true
			},
			paramiters: {
				handler: function() {
					this.current=1;
					this.getdatas();
				},
				deep: true
			}
		}
	}
</script>

<style>

</style>